<template>
	<div>
		<div class="select-panel-wrap">
			<div class="date-select">
				<!-- <span class="icon-arrow fn-vam i-icon f14" title="向前一个月"> < </span>
				
<span class="icon-arrow fn-vam i-icon f14" title="向后一个月"> > </span>
				-->
				<span class="date-picker">{{dateval}}</span>
					<el-date-picker
						v-model="daterange"
						type="daterange"
						placeholder="选择日期范围">
				</el-date-picker>
				
			</div>
			<div class="filter-sort" :class="{'unfold':showfilter}">
				<div @click="showfilter=!showfilter" class="filter-sort-head" >
					筛选<i class="fa-chevron-up fa" v-show="showfilter"></i>
					<i class="fa-chevron-down fa" v-show=" !showfilter"></i>

				</div>
				<div class="filter-sort-main" v-show="showfilter">
					<div class="search-wrap">
					<input type="text" class="input-room-search" placeholder="请输入房间号查询" maxlength="15">
					<i  class="fa  fa-search "></i>
					</div>
					<div class="ranklist-wrap">
				
						<!--<div class="rs-rank-terms">
							<h4>排序方式</h4>
							<ul class="rs-ranklist">
								<li>
									 <el-radio class="radio" v-model="radio" label="1">备选项1</el-radio>
 
								</li>
								<li>
								 <el-radio class="radio" v-model="radio" label="2">备选项2</el-radio>
								</li>
							</ul>
						</div> -->
						<div class="rs-rank-terms">
						<h4>房型筛选</h4>
						 <el-checkbox-group v-model="checkList">
							<ul class="rs-ranklist">
								<li v-for="item in roomTypeList">
									 <el-checkbox :label="item.name"  ></el-checkbox>
 
								</li>
								
							</ul>
							 </el-checkbox-group>
						</div>
						<div class="rs-rank-btns">
							<el-button  size="small">取消</el-button>
							<el-button type="primary"  size="small">确认</el-button>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="room-type-wrap">
				<div class="room-list">
				<table class="table text-center mb0" data-index="0">
    
					<tbody v-for="(val,key) in roomListObj" v-if="JSON.stringify(roomListObj) != '{}'" >
				
					<tr class="room-type-item" >
						<td :rowspan=val.length class="item-type">
							<p class="type-name-item" title="">{{key}}</p>
						</td>
						<td @mouseout="changeClearRoom('')" @mouseover="changeClearRoom(val[0].roomNo)" class="item-room j-item-room item-room-first " data-index="0" :data-doorno="val[0].doorNo" data-roomno="room17169173203414" >
							<p class="door-no" >{{val[0].doorNo}}</p>

							<div class="room-state">
								<i v-show="val[0].isClean">脏</i>
								
							</div>
							<div v-if="val[0].isClean" v-show="isclearroomNo==val[0].roomNo" class="dirty-clean j-dirty-clean" data-outindex="0" data-index="0">
								<span class="dirty-clean00">
								置为脏房
																</span>
							</div>
							<div v-else  v-show="isclearroomNo==val[0].roomNo" class="dirty-clean j-dirty-clean" data-outindex="0" data-index="0">
								<span class="dirty-clean00">
								置为净房
																</span>
							</div>
						</td>
					</tr>
					
					<tr class="room-type-item" v-if="val.length>1"  v-for="item in val.slice(1,val.length)" >
						
						<td @mouseout="changeClearRoom('')"  @mouseover="changeClearRoom(item.roomNo)" class="item-room j-item-room " data-index="1" data-doorno="D102" data-roomno="room17169148774614" data-islinklock="" data-roomtypename="公寓式酒店">
							<p class="door-no" title="D102">{{item.doorNo}}</p>

							<div class="room-state">
								<i v-show="item.isClean">脏</i>
								
							</div>
								<div v-if="item.isClean" v-show="isclearroomNo==item.roomNo" class="dirty-clean j-dirty-clean" data-outindex="0" data-index="0">
								<span class="dirty-clean00">
								置为脏房
																</span>
							</div>
							<div v-else  v-show="isclearroomNo==item.roomNo" class="dirty-clean j-dirty-clean" data-outindex="0" data-index="0">
								<span class="dirty-clean00">
								置为净房
																</span>
							</div>
						</td>
					</tr> 
						</tbody>
					
				<!--	<tr class="room-type-item">
						<td rowspan="2" class="item-type">
							<p class="type-name-item" title="公寓式酒店">公寓式酒店</p>
						</td>
						<td class="item-room j-item-room item-room-first room17169173203414" data-index="0" data-doorno="D101" data-roomno="room17169173203414" data-islinklock="" data-roomtypename="公寓式酒店">
							<p class="door-no" title="D101">D101</p>

							<div class="room-state">
								<i>脏</i>
								
							</div>
							<div v-show="" class="dirty-clean j-dirty-clean" data-outindex="0" data-index="0">
								<span class="dirty-clean00">
								置为脏房
																</span>
							</div>
						</td>
					</tr>
					
					<tr class="room-type-item">
						
						<td class="item-room j-item-room room17169148774614" data-index="1" data-doorno="D102" data-roomno="room17169148774614" data-islinklock="" data-roomtypename="公寓式酒店">
							<p class="door-no" title="D102">D102</p>

							<div class="room-state">
							
								
							</div>
							<div class="dirty-clean j-dirty-clean" data-outindex="0" data-index="1">
								<span class="dirty-clean01">
								置为脏房
							
								</span>
							</div>
						</td>
					</tr> -->
					
				</table>
				</div>
		</div>
	</div>
</template>
<script>
 import { mapGetters ,mapActions} from 'Vuex'
 import moment from 'moment';
 import './deskleft.less'
	export default{
		name:"",
		props:['roomListObj'],
		data(){
			return {
				daterange:[],
				showfilter:false,
				radio:1,
				checkList:[],
			
				roomTypeList:[{
					name:'全部房型',
					val:'1'

				},{
					name:'酒店式公寓',
					val:'2'

				},{
					name:'城市民宿',
					val:'3'

				}],
				roomType:'',
				roomList:[],
				isclearroomNo:''
			}
		},
		methods:{
			...mapActions(['getRoomLIst','getHotelInventories']),
			changeClearRoom(roomNo){
			//	console.log(roomNo)
				this.isclearroomNo=roomNo
			}
		},
		computed:{
			dateval(){
				let s=this.daterange[0];
				let e=this.daterange[1];
				if(s&&e){
					let ms=moment(s);
					
					return ms.format('MM-DD')+'至'+moment(e).format('MM-DD')
				}else{
				return ''
				}
			},
		
		},
		created(){
			let m=moment()
			let vm=this
			this.daterange=[moment(),moment().add(1, "months")];
			
			
		},
		mounted:function(){

		},
		watch:{

		},
		destroyed:function(){

		},
		components:{

		}
	}
</script>

<style scoped lang="less">
	.select-panel-wrap{

	}
</style>